<template>
  <div class="index-box d-flex" ref="index">
  	<div class="leftBox">
  			<div class="tree-box">
          <el-tree :data="treeList" node-key="categoryId" ref="tree"  current-node-key="" :props="defaultProps" default-expand-all :expand-on-click-node="false" @node-click="handleNodeClick"></el-tree>
        </div>
  	</div>
    <div class="rightBox">
	        <div class="mainBox" >
	          <div class="search" ref="search">
	            <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent class="demo-form-inline" id="searchBox">
	              <el-form-item prop="materialName">
	                  <el-input v-model="searchForm.materialName" clearable placeholder="请输入素材名称"></el-input>
	              </el-form-item>
	              <el-form-item prop="time">
	                <el-date-picker v-model="time" type="daterange" align="right" unlink-panels range-separator="至"
	                  start-placeholder="更新开始日期" end-placeholder="更新结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
	                  :picker-options="pickerOptions">
	                </el-date-picker>
	              </el-form-item>

	              <el-form-item class="clearfix">
	                <el-button type="primary" @click="handleSearch()" icon="el-icon-search">查询</el-button>
	                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
	              </el-form-item>

	            </el-form>
	          </div>
	          <div class="actionBtn" ref="actionBtn">
	            <div class="actionBtnLeft">
	              <el-radio-group v-model="searchForm.materialType" size="small" @change="handleSearch">
	                <el-radio-button label="">全部</el-radio-button>
	                <el-radio-button label="1">图片</el-radio-button>
	                <el-radio-button label="2">视频</el-radio-button>
	              </el-radio-group>
	               <el-button type="primary" @click="handleAdd()" size="small"  icon="el-icon-plus" style="margin-left: 15px;">上传素材</el-button>
	               <!-- <el-button type="danger" icon="el-icon-delete" size="small" @click="handleDelete">批量删除</el-button> -->
	            </div>
	            <div class="actionBtnRight">
	               <!-- <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet> -->
	            </div>
	          </div>
	          <div class="table" ref="table" :style="{height:tableHeight}" v-loading="loading">
	              <div class="tableBox" >
	                <ul class="el-upload-list el-upload-list--picture-card">
	                 <!-- <el-row :gutter="20">
	                    <el-col :span="4" v-for="item in dataList" class="itemBox"> -->
	                      <li class="el-upload-list__item is-ready" v-for="item in dataList">
	                        <div class="item c-items" >
	                          <img class="el-upload-list__item-thumbnail" v-if="item.materialType=='1'" :src="item.materialPath" alt="">
	                          <video class="el-upload-list__item-thumbnail" v-else :src="item.materialPath"></video>
	                          <span class="el-upload-list__item-actions">
	                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(item)">
	                              <i class="el-icon-zoom-in"></i>
	                            </span>
	                            <!-- <span class="el-upload-list__item-delete" @click="handleEdit(item)">
	                              <i class="el-icon-edit-outline"></i>
	                            </span> -->
	                            <span  class="el-upload-list__item-delete" @click="handleRemove(item)">
	                              <i class="el-icon-delete"></i>
	                            </span>
	                          </span>
	                        </div>
	                        <p class="name">{{item.materialName}}</p>
	                      </li>
	                    <!-- </el-col>
	                  </el-row> -->
	                </ul>

	              </div>
	          </div>
	          <div class="page" ref="page">
	            <MyPagination
	               :total="total"
	               :page.sync="searchForm.pageNum"
	               :limit.sync="searchForm.pageSize"
	               @pagination="dataInfo"
	             />
	          </div>
	        </div>
    </div>
    <el-dialog :visible.sync="dialogVisible"  title="查看">
      <div class="d-flex justify-center">
        <img width="100%" :src="statusRow.materialPath" alt="" v-if="statusRow.materialType=='1'">
        <video width="500" height="" :src="statusRow.materialPath" controls="controls" v-else></video>
      </div>
    </el-dialog>

  <!-- /*上传素材*/	 -->
  <el-dialog title="上传素材" width="700px" v-dialogDrag :close-on-click-modal="false" :visible.sync="materialVisible" @close="materialVisible = false">
     <el-form label-position="right" :model="user" :rules="rules" ref="user">
       <el-form-item label="商品分类:" prop="goodsCategoryId" label-width="125px"  style="width:100%" >
            <treeselect v-model="user.goodsCategoryId" :options="treeList" :normalizer="normalizer" placeholder="选择商品分类" />
       </el-form-item>
       <el-form-item label="素材名称:" prop="materialName" label-width="125px"  style="width:100%" >
           <el-input v-model="user.materialName" placeholder="请输入素材名称" clearable />
       </el-form-item>
       <el-form-item label="素材类型:" prop="materialType" label-width="125px"  style="width:100%" >
           <el-radio-group v-model="user.materialType">
             <el-radio label="1">图片</el-radio>
             <el-radio label="2">视频</el-radio>
           </el-radio-group>
       </el-form-item>
       <el-form-item label="上传图片:" prop="img" label-width="125px"  style="width:100%" v-if="user.materialType=='1'">
         <MyUpImg :imagePreview='user.img'  @change="imageChange($event,'img')"></MyUpImg>
       </el-form-item>
       <el-form-item label="上传视频:" prop="video" label-width="125px"  style="width:100%" v-if="user.materialType=='2'">
         <MyUpVideo :imagePreview='user.video'  @change="imageChange($event,'video')" ></MyUpVideo>
       </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button @click="materialVisible = false" size="small">取 消</el-button>
       <el-button type="primary" @click="submitMaterial('user')" size="small" :loading="userLoading">确 定</el-button>
     </div>
   </el-dialog>

  </div>
</template>

<script>
  import common from '@/api/api';
  import { goodsCategoryList,materialAdd,materialList,materialDelete } from '@/api/getData';
  import option from '../../common/option.js';
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    components: { Treeselect },
    data() {
      return {
        loading: false,
        userLoading: false,
        auditList:[],
        time:[],
        searchForm: {
          goodsCategoryId:'',
          materialName:"",
          materialType:'',
          pageNum: 1,
          pageSize: 20,
        },
        treeList: [{categoryId: "",name: "商品分类",children: []}],
        tableHeight:0,//table 高度
        dataList:[],
        total: 0,
        defaultProps: {
           children: 'children',
           label: 'name'
        },
        multipleSelection: '',
        dialogVisible:false,
        dialogImageUrl:'',
        materialVisible:false,
        dialogTitle:'',
        statusRow:{},
        user: {
           goodsCategoryId:undefined,
           materialName:'',
           materialType:'1',
           materialPath:'',
           img:'',
           video:''
        },
        rules: {
          goodsCategoryId: [{required: true, message: '请选择商品分类',trigger: 'blur'}],
          materialName: [{required: true, message: '请输入素材名称',trigger: 'blur'}],
          type: [{required: true, message: '请选择素材类型',trigger: 'blur'}],
          img: [{required: true, message: '请上传图片',trigger: 'blur'}],
          video: [{required: true, message: '请上传视频',trigger: 'blur'}],
        },
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      // this.getSelect();
      // this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55+'px';
      })
    },
    methods: {
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.time, 'startTime', 'endTime');
          this.loading = true;
          const result = await materialList(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      getSelect(){
        goodsCategoryList().then(res=>{
          this.treeList[0].children = res.data;
        });
        //this.getSelectList('goods_audit_status').then(res=>{ this.goods_audit_status = res.data; })
      },
      imageChange(path, name) {
        this.user[name] = path;
        console.log(this.user)
      },
      /** 转换部门数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.categoryId,
          label: node.categoryName,
          children: node.children
        };
      },
      handleRemove(file) {
        console.log(file);
        this.$modal.confirm('是否确认删除名称为"' + file.materialName + '"的数据项？').then(function() {
          return materialDelete({materialId:file.materialId });
        }).then(() => {
          this.dataInfo();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      handlePictureCardPreview(row) {
        this.statusRow = row;
        this.dialogVisible = true;
      },
      handleEdit(file) {
        console.log(file);
      },
      handleAdd(){/*上传素材*/
        this.resetForm("user");
        this.materialVisible = true;
      },
      resetQuery() {
        this.time = [];
        this.resetForm("searchForm");
        this.dataInfo();
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const roleIds = row.roleId || this.ids;
        if(!this.ids.length && (!row.roleId)){
          this.$modal.msgError("请先选中在点击批量删除");
          return;
        }
        this.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？').then(function() {
          return delRole(roleIds);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      submitMaterial(formName) {
         console.log(this.user);
        /*添加用户*/
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.userLoading = true;
            if(this.user.materialType=='1'){
              this.user.materialPath = this.user.img;
            }else{
              this.user.materialPath = this.user.video;
            }
            materialAdd(this.user).then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
                this.materialVisible = false;
                this.dataInfo();
              } else {
                this.$message.error(result.msg);
              }
              this.userLoading = false;
            });
          }
        })
      },
      handleSearch() {
        this.searchForm.pageNum = 1;
        this.dataInfo();
      },
      handleNodeClick(data){/*树节点点击事件*/
        this.searchForm.goodsCategoryId =  data.categoryId;
        this.handleSearch();
      },
    }
  }
</script>

<style scoped lang="scss">
  .c-items{
    height:134px;
  }
  .el-upload-list__item-thumbnail{
    object-fit: contain;
  }
  .tableDialog{
    max-height: 700px;
    overflow-y: auto;
  }
  .el-upload-list--picture-card .el-upload-list__item{
    overflow: inherit;
    margin-right:15px;
    height:auto;
    padding:10px;
  }
  .tableBox .name{
    font-size: 14px;
    color:#333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin:0px 0 10px 0;
  }
  .tableDialog .el-checkbox-group{
    display: flex;
    flex-wrap: wrap;
    .item{
      margin:0px 20px 20px 20px;
      position: relative;
      .el-checkbox{
        position: absolute;
        left:0px;
        top:0px;
       /deep/ .el-checkbox__label{display: none;}
      }
      .spu{
        width:100px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color:#606266;
        padding:3px 0 3px 0;
      }
      .name{
        width:100px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color:#606266;
      }
      .img{
        width:100px;
        height: 100px;
      }
    }
  }
  .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding: 10px;
      height: 52px;
  }
  .index-box{
    padding:0px!important;
    margin-left:0px;
  }
  .tree-box /deep/ .el-tree-node{
     background: #D8E4DD;
  }
  .tree-box> /deep/ .el-tree>.el-tree-node{
    padding:3px;
  }
  .tree-box> /deep/ .el-tree .is-current{
    background:#fff;
  }
  .table-box{
    padding:15px
  }
  .down{
    color: #909399;
    cursor: pointer;
    text-decoration:underline;
  }
  .down:hover{
    color: #a6a9ad;
  }
  .up{
    color:#61997A;
    cursor: pointer;
    text-decoration:underline;
  }
  .up:hover{
    color:#81ad95;
  }
  .treeTitle{
    color: #606266;
    font-size: 15px;
    margin:20px 20px 0 20px
  }
</style>
